<template>
  <div class="bottom-tabs bg_colorff">
    <ul class="bottom-tabs-ul flex flex-align-center">
      <li
        class="bottom-tabs-item flex flex-v flex-align-center"
        v-for="item in bottomTabs"
        @click="changeTabs(item.text)"
      >
        <img :src="item.status?item.urlActive:item.url" alt="" class="bottom-tabs-img">
        <span class="bottom-tabs-text font_size20" :class="item.status?'active':''">{{item.text}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bottomTabs: [
        {
          url: "/static/imgs/bottomTabs/home.png",
          urlActive: "/static/imgs/bottomTabs/home-active.png",
          text: "首页",
          status: 0,
          to: "/"
        },
        {
          url: "/static/imgs/bottomTabs/all.png",
          urlActive: "/static/imgs/bottomTabs/all-active.png",
          text: "所有商品",
          status: 0,
          to: "/goods"
        },
        {
          url: "/static/imgs/bottomTabs/my.png",
          urlActive: "/static/imgs/bottomTabs/my-active.png",
          text: "我的",
          status: 0,
          to: "/center"
        }
      ]
    };
  },

  props: {
    routerText: {
      type: String,
      default: ""
    }
  },

  mounted() {
    this.changeTabs(this.routerText);
  },

  methods: {
    changeTabs(text) {
      if (text == "首页") {
        this.bottomTabs.forEach(item => {
          if (item.text == text) {
            item.status = 1;
            this.$router.push(item.to);
          }
        });
      } else {
        if (this.$store.state.userinfo.uid) {
          this.bottomTabs.forEach(item => {
            if (item.text == text) {
              item.status = 1;
              this.$router.push(item.to);
            }
          });
        } else {
          //跳转登录页
        }
      }
    }
  }
};
</script>
<style lang='less' scoped>
@import url(../../assets/css/common/bottomTabs.less);
</style>